<template>
  <header class="bg-gray-900  sm:flex sm:justify-between sm:px-4 sm:py-3">
    <div class="flex items-center justify-between px-4 py-3 sm:p-0">
      <div>
        <img class="h-8" src="/img/logo-inverted.svg" alt="workcation" />
      </div>

      <div class="sm:hidden">
        <button
          type="button"
          @click="isOpen = !isOpen"
          class="block text-gray-400 hover:text-white  focus:text-white focus:outline-none"
        >
          <svg
            class="h-6 w-6 fill-current"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              v-if="!isOpen"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 6h16M4 12h16M4 18h16"
            />
            <path
              v-else
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
      </div>
    </div>

    <nav :class="isOpen ? 'block' : 'hidden'" class="sm:block">
      <div class="text-white font-semibold px-2 pt-1 pb-4 sm:flex sm:p-0 items-center">
        <a href="#" class="px-2 py-1 block hover:bg-gray-700 rounded truncate"
          >List your property</a
        >
        <a
          href="#"
          class="mt-1 sm:mt-0 sm:ml-2 px-2 py-1 block hover:bg-gray-700 rounded"
          >Trips</a
        >
        <a
          href="#"
          class="mt-1  sm:mt-0 sm:ml-2 px-2 py-1 block hover:bg-gray-700 rounded"
          >Messages</a
        >
      <AccountDropdown class="hidden sm:block sm:ml-2 " />
      </div>

      <div class="px-4 py-5 border-t border-gray-600 sm:hidden">
        <div class="flex items-center">
          <img
            class="h-8 w-8 rounded-full  border-gray-200  border-2  object-cover"
            src="https://source.unsplash.com/random"
            alt=""
          />
          <span class="text-white font-semibold ml-3">Jane Doe</span>
        </div>

        <div class="mt-4">
          <a href="#" class="block text-gray-400  hover:text-white"
            >Account settings</a
          >
          <a href="#" class="mt-2 block text-gray-400 hover:text-white"
            >Support</a
          >
          <a href="#" class="mt-2 block text-gray-400 hover:text-white"
            >Sign out</a
          >
        </div>
      </div>
    </nav>
  </header>
</template>

<script>
import AccountDropdown from "./AccountDropdown.vue";

export default {
  components: { AccountDropdown },
  data() {
    return {
      isOpen: false,
    };
  },
};
</script>

<style></style>
